<template>
	<view>
		<view :class="curTheme" class="status_bar cal"></view>
		<!-- 设置开始 -->
		<!-- 设置头部开始 -->
		<view :class="curTheme" class="fixed-top bg-white shadow animated slideInDown" v-if="setStatus">
			<view class="status_bar"></view>
			<view class="flex align-center" style="height: 80rpx;">
				<view @tap="quit">
					<myIcon iconId="icon-jiantou-copy" class="px-2"></myIcon>
				</view>
				<text>{{novalName}}</text>
				<text class="flex-1 px-2 font-sm text-ellipsis">{{curChapterTitle}}</text>
			</view>
		</view>
		<!-- 设置底部部分 -->
		<view :class="curTheme" class="fixed-bottom flex align-center bg-white shadow animated slideInUp"
			style="height: 200rpx;" v-if="setStatus">
			<view class="flex-1 flex flex-column align-center" @tap="changeCatalogStatus(true)">
				<myIcon iconId="icon-xueyuan-mulu" iconSize="55"></myIcon>
				<view>目录</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @tap="isNight">
				<myIcon iconId="icon-yanjing" iconSize="55"></myIcon>
				<view>夜间模式</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @tap="changeTypeFaceStatus(true)">
				<myIcon iconId="icon-ziti1" iconSize="55"></myIcon>
				<view>字体</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @tap="changeMoreStatus(true)">
				<myIcon iconId="icon-diqiuhuanqiu" iconSize="55"></myIcon>
				<view>更多</view>
			</view>
		</view>
		<!-- 设置结束 -->
		<!-- 目录开始 -->
		<uni-drawer :visible="catalogStatus" @close="changeCatalogStatus(false)">
			<view class="status_bar"></view>
			<view class="flex align-center justify-center" style="height: 80rpx;">章节选择</view>
			<scroll-view scroll-y="true" :style="{height: `${calHeight - 80}rpx`}">
				<block v-for="item in chapterCatalog" :key="item.id">
					<view class="px-1 py-2 font text-ellipsis border-bottom rounded"
						:class="chapterIndex+1===item.id?'curChapter':''" @tap="toPointChapter(item.id)">{{item.title}}
					</view>
				</block>
			</scroll-view>
		</uni-drawer>
		<!-- 目录结束 -->
		<!-- 字体设置开始 -->
		<view :class="curTheme" class="fixed-bottom bg-white shadow px-3 pt-3 animated slideInUp"
			style="height: 180rpx;" v-if="typeFaceStatus">
			<view class="flex">字体:
				<slider class="flex-1" :value="myFontSize" min="20" max="50" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="changeFontSize" @changing="changeFontSize" />
			</view>
			<view class="flex">间距:
				<slider class="flex-1" :value="myLineHeight" min="20" max="100" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="changeLineHeight" @changing="changeLineHeight" />
			</view>
		</view>
		<!-- 字体设置结束 -->
		<!-- 更多设置开始 -->
		<view :class="curTheme"
			class="flex flex-column justify-center fixed-bottom bg-white shadow px-3 animated slideInUp"
			style="height: 249rpx;" v-if="moreStatus">
			<!-- #ifdef MP||APP -->
			<view class="flex align-center mt-1">
				亮度:
				<slider class="flex-1" :value="brightNess" min="0" max="100" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="setBrightNess" />
			</view>
			<!-- #endif  -->
			<view class="flex font text-light-black mt-2" style="justify-content: space-between;">
				<block v-for="item in themes" :key="item.id">
					<view class="flex-1">
						<view :class="item.id" class="border rounded mx-1" style="height: 80rpx;"
							@tap="changeThemeIndex(item.id)"></view>
						<view class="text-center">{{item.name}}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 更多设置结束 -->
		<!-- 文本开始 -->
		<swiper :class="curTheme"
			:style="{height: `${calHeight}rpx`, fontSize: `${myFontSize}px`, lineHeight: `${myLineHeight}px`}"
			class="px-2" @tap="changeSetStatus" @change="swiperChangeChapter" :current="chapterIndex">
			<swiper-item v-for="item in LoadedChapters" :key="item.id">
				<scroll-view scroll-y="true" :style="{height: `${calHeight}rpx`}">
					<uni-load-more status="loading" v-if="!item.text"></uni-load-more>
					<rich-text :nodes="item.text"></rich-text>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 文本结束 -->
	</view>
</template>

<script>
	let testContent
	import test from '@/common/test'
	import unit from '@/common/unit'
	import htmlParser from '@/common/html-parser' // 则需自己将 HTML String 转化为 nodes 数组
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	export default {
		data() {
			return {
				statusBarHeight: this.$statusBarHeight,
				calHeight: 0, // 屏幕高度
				brightNess: 0, // 屏幕亮度
				setStatus: false, // 小说头部底部状态管理
				catalogStatus: false, // 小说目录状态管理
				typeFaceStatus: false, // 小说字体状态管理
				moreStatus: false, // 更多功能状态管理
				chapterIndex: 0, // 当前章节标识
				novalName: '请稍等', // 小说名字
				chapterCatalog: [{
					id: 1,
					title: ''
				}], // 小说目录
				LoadedChapters: [{
					id: 1,
					title: ''
				}], // 已经加载的章节
				myFontSize: uni.getStorageSync('myFontSize') || 20, // 文字大小
				myLineHeight: uni.getStorageSync('myLineHeight') || 40, // 文字间距
				themeIndex: uni.getStorageSync('themeIndex'), // 默认主题标识
				themes: [{
						id: 'blueTheme',
						name: '天蓝'
					},
					{
						id: 'eyeHelpTheme',
						name: '护眼'
					},
					{
						id: 'lightGretTheme',
						name: '淡灰'
					},
					{
						id: 'morningTheme',
						name: '早晨'
					},
					{
						id: 'nightTheme',
						name: '夜间'
					}
				]
			}
		},
		components: {
			uniLoadMore,
			uniDrawer
		},
		computed: {
			// 当前章节名称
			curChapterTitle() {
				return this.chapterCatalog[this.chapterIndex].title || '加载中'
			},
			// 当前主题
			curTheme() {
				let index = this.themeIndex;
				if (!uni.getStorageSync('themeIndex') && uni.getStorageSync('themeIndex') !== 0) {
					index = 3
				}
				return this.themes[index].id
			}
		},
		methods: {
			// 退出
			quit() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 改变头部底部状态
			changeSetStatus() {
				if (!this.setStatus) {
					if (this.typeFaceStatus) {
						this.changeTypeFaceStatus(false)
						return
					} else if (this.moreStatus) {
						this.changeMoreStatus(false)
						return
					}
				}
				this.setStatus = !this.setStatus
			},
			// 改变目录部分的状态
			changeCatalogStatus(Bol) {
				this.catalogStatus = Bol
				if (this.catalogStatus) this.changeSetStatus()
			},
			// 改变字体设置的状态
			changeTypeFaceStatus(Bol) {
				this.typeFaceStatus = Bol
				if (this.typeFaceStatus) this.changeSetStatus()
			},
			// 改变更多设置的状态
			changeMoreStatus(Bol) {
				this.moreStatus = Bol
				if (this.moreStatus) this.changeSetStatus()
			},
			// 初始化
			async init() {
				// 获取书源数据
				let {
					content
				} = await this.$http.get('/testContent')
				testContent = content;
				let res = await this.$http.get('/testSynopsis')
				this.novalName = res.name
				this.chapterCatalog = res.chapterCatalog

				this.PreLoad() // 预加载
				this.DeplyLoad() // 延迟加载
			},
			// 预加载
			PreLoad() {
				this.LoadedChapters.shift();
				this.chapterCatalog.forEach(item => this.LoadedChapters.push({
					id: item.id,
					title: item.title,
					text: ''
				}))
			},
			// 延迟加载
			DeplyLoad() {
				let index = this.chapterIndex;
				if (this.LoadedChapters[index].text === '') {
					setTimeout(() => this.LoadedChapters[index].text = htmlParser(testContent[index].text), 1000)
				}
			},
			// 改变当前章节标识
			changeIndex(index) {
				this.chapterIndex = index
			},
			// 滑动改变当前章节标识
			swiperChangeChapter(e) {
				this.changeIndex(e.detail.current)
				this.DeplyLoad()
			},
			// 点击目录章节跳转到对应章节
			toPointChapter(id) {
				let curIndex = this.chapterCatalog.findIndex(item => item.id === id)
				if (this.chapterIndex === curIndex) return
				this.changeIndex(curIndex)
				this.DeplyLoad()
			},
			// 改变字体大小
			changeFontSize(e) {
				this.myFontSize = e.detail.value
				uni.setStorageSync('myFontSize', this.myFontSize)
			},
			// 改变行文间距
			changeLineHeight(e) {
				this.myLineHeight = e.detail.value
				uni.setStorageSync('myLineHeight', this.myLineHeight)
			},
			// #ifdef MP||APP
			// 获取屏幕亮度 getScreenBrightness
			getBrightNess() {
				uni.getScreenBrightness({
					success: e => this.brightNess = (e.value).toFixed(1)
				})
			},
			// 设置屏幕亮度 setScreenBrightness
			setBrightNess(e) {
				let newVal = e.detail.value
				this.brightNess = newVal
				uni.setScreenBrightness({
					value: (newVal * 8 / 1000).toFixed(1)
				})
			},
			// #endif
			// 更改主题标识
			changeThemeIndex(id) {
				let curIndex = this.themes.findIndex(themes => themes.id === id)
				this.themeIndex = curIndex
				// 写入主题缓存
				uni.setStorageSync('themeIndex', curIndex)
			},
			// 切换夜间模式
			isNight() {
				this.themeIndex !== 4 ? this.changeThemeIndex('nightTheme') : this.changeThemeIndex('morningTheme')
			}
		},
		onLoad(e) {
			this.chapterIndex = e.chapterId;
			this.init()
		},
		created() {
			//  动态的获取屏幕高度  getSystemHeight 获取屏幕高度   Torpx px转rpx
			// #ifndef MP
			let height = unit.getSystemHeight() - unit.Torpx(this.statusBarHeight)
			// #endif
			// #ifdef MP
			let height = unit.getSystemHeight() - unit.Torpx(this.statusBarHeight - 50)
			// #endif
			this.calHeight = Math.floor(height)
			// #ifdef MP||APP
			// 获取屏幕亮度
			this.getBrightNess()
			// #endif
		}
	}
</script>

<style>

</style>
